<template>
  <div class="param-config-container">
    <div class="search-list">
      <ui-form :model="paramConfigForm" ref="paramForm" label-width="100px" class="demo-ruleForm">
        <ui-row type="flex" class="row-bg" justify="space-around">
          <ui-col :span="8">
            <ui-form-item label="参数编号" prop="paramNo">
              <ui-input v-model="paramConfigForm.paramNo"></ui-input>
            </ui-form-item>
          </ui-col>
          <ui-col :span="8">
            <ui-form-item label="参数名称" prop="paramname">
              <ui-input v-model="paramConfigForm.paramname"></ui-input>
            </ui-form-item>
          </ui-col>
        </ui-row>
        <ui-row type="flex" class="row-bg" justify="center">
          <ui-button type="primary" @click="submitForm('paramForm')">查询</ui-button>
          <ui-button @click="resetForm('paramForm')">重置</ui-button>
        </ui-row>
      </ui-form>
    </div>
    <div class="task-list-tabble">
      <vx-table 
        :columns="columns" 
        :tableData="tableData"
        :customerStyle="true">
          <template slot="operation" slot-scope="scope">
          <ui-link type="primary" :underline="false" @click="onModify(scope)">修改</ui-link>
          </template>
      </vx-table>
      <div class="page">
        <ui-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          background
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="totalPage">
        </ui-pagination>
      </div>
    </div>
    <!-- 修改 -->
     <ui-dialog title="收货地址" :visible.sync="dialogFormVisible"> 
      <ui-form :model="modifyForm" :rules="rules" ref="modifyForm" label-width="100px">
        <ui-row type="flex" class="row-bg" justify="center">
          <ui-col :span="12">
            <ui-form-item label="参数编号：">
              <span>{{modifyForm.paramNo }}</span>
            </ui-form-item>
          </ui-col>
        </ui-row>
        <ui-row type="flex" class="row-bg" justify="center">
          <ui-col :span="12">
            <ui-form-item label="参数名称：" prop="paramName">
              <ui-input v-model="modifyForm.paramName" placeholder="请输入内容"></ui-input>
            </ui-form-item>
          </ui-col>
        </ui-row>
        <ui-row type="flex" class="row-bg" justify="center">
          <ui-col :span="12">
            <ui-form-item label="参数内容：" prop="paramcontet">
              <ui-input v-model="modifyForm.paramcontet" placeholder="请输入内容"></ui-input>
            </ui-form-item>
          </ui-col>
        </ui-row>
        <ui-row type="flex" class="row-bg" justify="center">
          <ui-col :span="12">
            <ui-form-item label="参数说明：" prop="paramdetails">
              <ui-input type="textarea" placeholder="请输入内容" v-model="modifyForm.paramdetails" maxlength="30" show-word-limit> </ui-input>
            </ui-form-item>
          </ui-col>
        </ui-row>
       
      </ui-form>
      <div slot="footer" class="dialog-footer">
        <ui-row type="flex" class="row-bg" justify="center">
          <ui-button @click="dialogFormVisible = false">取 消</ui-button>
          <ui-button type="primary" @click="onConfirm('modifyForm')">确 定</ui-button>
        </ui-row>
        
      </div>
    </ui-dialog>
  </div>
</template>

<script>
import vxTable from '@/components/vx-table';
import {cloneDeep} from '@csii/vx-util'
export default {
  name:'paramConfig',
  components: {
    vxTable,
  },
  data() {
    return {
      paramConfigForm: {},
      modifyForm:{},
      dialogFormVisible:false,
      totalPage:10,
      currentPage:1,
      tableData:[
        {paramNo:'1',paramName:'1',paramcontet:'1',paramdetails:'1'},
        {paramNo:'2',paramName:'2',paramcontet:'2',paramdetails:'2'},
      ],
      columns: [
      { type: 'index', label: '序号', width: '80' },
      { prop: 'paramNo', label: '参数编号', width: '120' },
      { prop: 'paramName', label: '参数名称', width: '120' },
      { prop: 'paramcontet', label: '参数内容', width: '120' },
      { prop: 'paramdetails', label: '参数说明', width: '120' }],
      rules:{
       paramName:{ required: true, message: '请输入参数名称', trigger: 'blur' },
       paramcontet:{ required: true, message: '请输入参数内容', trigger: 'blur' },
       paramdetails:{ required: true, message: '请输入参数说明', trigger: 'blur' },
      }
    };
  },
  methods: {
  //  修改
  onModify(scope){
    this.dialogFormVisible=true
    this.modifyForm=cloneDeep(scope.scope)
  },
  // 查询
  submitForm(formName){
    
  },
  // 页面改变
  handleCurrentChange(val){
    
  },
  // 确认修改
  onConfirm(formName){
    this.$refs[formName].validate((valid) => {
      if (valid) {
        this.dialogFormVisible = false
      } else {
        console.log('error submit!!');
        return false;
      }
    });
  },
  //重置
  resetForm(formName) {
    this.$refs[formName].resetFields();
  }
  },
};
</script>

<style lang="scss" scoped>
.param-config-container{
  box-sizing: border-box;
  width: 100%;
  .search-list{
    margin-top: 18px;
    .row-bg{
      margin-top: 20px;
    }
  }
  .task-list-tabble {
    margin: 30px 141px;
    .page{
      display: flex;
      justify-content: flex-end;
    }
  }
}
// ::v-deep .ui-select {
//   display: block;
// }
</style>
